<template>
    <div>
        <XG6Node :isToJsonData="true" :value="{...data}" @setX6JsonData="setX6JsonData" />
    </div>
</template>
<script>
const data = {
    ...{
        cells: [
            {
                position: { x: 220, y: 180 },
                size: { width: 100, height: 100 },
                attrs: {
                    label: {
                        text: "条件节点tryryt",
                        fill: "#000000",
                        fontSize: 14,
                        textWrap: { width: -50, height: "70%", ellipsis: true },
                    },
                    body: {
                        fill: "#ffffff",
                        stroke: "#000000",
                        refPoints: "0,10 10,0 20,10 10,20",
                        strokeWidth: 1,
                    },
                },
                visible: true,
                shape: "polygon",
                id: "1145a7b8-4178-403e-8d99-65ebaa7dec96",
                ports: {
                    groups: {
                        top: {
                            position: "top",
                            attrs: {
                                circle: {
                                    r: 4,
                                    magnet: true,
                                    stroke: "#2D8CF0",
                                    strokeWidth: 2,
                                    fill: "#fff",
                                },
                            },
                        },
                        bottom: {
                            position: "bottom",
                            attrs: {
                                circle: {
                                    r: 4,
                                    magnet: true,
                                    stroke: "#2D8CF0",
                                    strokeWidth: 2,
                                    fill: "#fff",
                                },
                            },
                        },
                        left: {
                            position: "left",
                            attrs: {
                                circle: {
                                    r: 4,
                                    magnet: true,
                                    stroke: "#2D8CF0",
                                    strokeWidth: 2,
                                    fill: "#fff",
                                },
                            },
                        },
                        right: {
                            position: "right",
                            attrs: {
                                circle: {
                                    r: 4,
                                    magnet: true,
                                    stroke: "#2D8CF0",
                                    strokeWidth: 2,
                                    fill: "#fff",
                                },
                            },
                        },
                    },
                    items: [
                        { id: "port1", group: "top" },
                        { id: "port2", group: "bottom" },
                        { id: "port3", group: "left" },
                        { id: "port4", group: "right" },
                    ],
                },
                zIndex: 1,
            },
        ],
    },
}
export default {
    data() {
        return {
            data
        }
    },
    methods: {
        setX6JsonData(data) {
            console.log(data,'data');
        }
    }
}
</script>

<style>
</style>
